<template>
  <div>
     <el-dialog
    title="新增用户"
    :visible.sync="addUserDia"
    width="60%"
    center
    >
    <el-row>
      <el-col :span="21" :offset="1">
        <el-form
        ref="addUserDate"
        :model="addUserDate"
        label-width="80px"
        :inline="true"
        :label-position="'right'"
        status-icon
        :rules="rules">
        <el-form-item prop="title" label="标题：">
          <el-input v-model="addUserDate.title" clearable />
        </el-form-item>
        <el-form-item label="目录：" prop="catalog">
            <el-select clearable v-model="addUserDate.catalog">
            <el-option label="散文-旅游" value="散文-旅游"></el-option>
            <el-option label="散文-亲春" value="散文-亲春"></el-option>
             <el-option label="散文-祖国" value="散文-祖国"></el-option>
            </el-select>
            </el-form-item>

        <el-form-item prop="tags" label="标签：">
          <el-input v-model="addUserDate.tags" clearable />
        </el-form-item>

         <el-form-item prop="sub1" label="简介：">
          <el-input v-model="addUserDate.sub1" clearable />
        </el-form-item>
        
                <el-form-item label="详情：" prop="sub2" >
                <el-input type="textarea" v-model="addUserDate.sub2"></el-input>
                </el-form-item>
        </el-form>
<el-upload
    ref="upload"
  class="upload-demo"
  action="http://192.168.56.1:8081/shop/addImg"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
   accept="image/png, image/jpeg, image/svg"
  :on-success="uploadSuccess"
  :limit="1"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addUserDia=false">取消</el-button>
      <el-button
        type="primary"
        @click="addSubmitBtn"
      >确定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import {editShop} from '@/api/shop'
export default {
  name: 'editShop',

  data () {
    return {
         fileLists:'',
    dialogImageUrl: '',
        addUserDate:{},
        addUserDia:false,
         rules: {
            title:{required: true, message: "请输入标题", trigger: "change" },
             catalog:{required: true, message: "请选择目录", trigger: "change" },
              tags:{required: true, message: "请输入标签", trigger: "change" },
               sub1:{required: true, message: "请输入简介", trigger: "change" },
                sub2:{required: true, message: "请输入详情", trigger: "change" }
        }
    }
  },

  methods: {
       handleRemove(file, fileLists) {
        console.log(fileLists);
      },
      handlePreview(file) {
        console.log(file);
      },uploadSuccess(file){
          console.log(file.data);
        //   this.skuImg.skuImgUrl=file.data;
        this.fileLists=file.data;
       
        //   this.fileLists.push({skuImgUrl:file.data});
          console.log(this.fileLists);       

      },
    open(flag,ast) {
      //  console.log(ast)
      this.addUserDate=ast
    //   console.log(this.mylist)
      if (this.$refs["addUserDate"]) {
        this.$refs["addUserDate"].resetFields();
      }
      this.addUserDia = flag;

    },
    addSubmitBtn(){
        this.$refs["addUserDate"].validate(valid => {
        if (valid) {
        console.log("=");
        console.log(this.fileLists);
        if(this.fileLists==null|| this.fileLists==''){
        this.$message({
          showClose: true,
          message: '请上传图片！',
          type: 'error'
        });
        }else{
        let obj={
        catalogId:this.addUserDate.catalogId,
        reading: this.addUserDate.reading,
        catalog: this.addUserDate.catalog,
        img:  this.fileLists,
        sub1: this.addUserDate.sub1,
        sub2: this.addUserDate.sub2,
        tags: this.addUserDate.tags,
        title: this.addUserDate.title
        }
        editShop(obj).then(response => {          
        if(response.data.responseCode===200){
         this.$message({
          showClose: true,
          message: '恭喜你，修改成功！',
          type: 'success'
        });
         this.fileLists='';
         this.$emit('getData');
          }else{
              this.$message({
          showClose: true,
          message: '错了哦，新增失败！',
          type: 'error'
        });
          }
        })
      
            
        }
         this.$refs.upload.clearFiles();
        this.fileLists='';
       this.addUserDia = false;
        }
       
        })
        
    }

  }
}
</script>

<style scoped>

</style>
